<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Grid API</title>
        <script src="../scripts/jquery.js"></script>
        <script src="../scripts/raphael.js"></script>
        <script src="../js/chart-core.js"></script>
        <script src="../js/line-chart.js"></script>
    		<script type="text/javascript">
    			$(function(){
    			    // var r = Raphael("chart",800,500),
    			    //     config = {
    			    //       container :  {
    			    //         wleft: 50,
    			    //         htitle: 100,
    			    //         wright: 50,
    			    //         hfooter: 50
    			    //       },
    			    //       data: {
    			    //         xmin: 0,
    			    //         xmax: 210,
    			    //         ymin: 0,
    			    //         ymax: 210,
    			    //         xstep: 20,
    			    //         ystep: 20
    			    //       }
    			    //     },
    			    //     valsX = [100,200,300,400,500,700],
    			    //                   valsY = [67,87,23,98,12,90];
    			    //                   
    			    //               r.lineChart(valsX,valsY,config,{});
    			    
    			    var r = Raphael("chart",900,700);
    			    
    			    var obj = {
    			      container:{
    			        x: 100,
    			        y: 100,
    			        width: 700,
    			        height: 500
    			      },
    			      tooltip: {
    			        width: 100,
    			        height: 50,
    			        radius: 10
    			      },
    			      xAxis: {
                   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
    			      series: [{
                   name: 'Tokyo',
                   data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                }, {
                   name: 'New York',
                   data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                }, {
                   name: 'Berlin',
                   data: [-0.9, -99, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
                }, {
                   name: 'London',
                   data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                }]
    			    },
    			    theme = {
    			      colors: [{fill:"cornflowerblue"},{fill:"rgba(200, 100, 0, .5)"},{fill:"rgba(200, 0, 0, 1)"},{fill:"rgba(0,100,200, .5)"}],
    			      tooltip:{
    			        display: true,
    			        text : {
                    title : {fill:"black"},
                    message : {fill:"black"}
                  },
                  style : {stroke:"none",opacity:1}
    			      }
    			    };
    			    
    			    r.lines(obj,theme);
    			});
    			
    		</script>
        <style type="text/css" media="screen">
    			img{
    				display : none
    			}
        </style>
    </head>
    <body>
        <div id="chart">
        </div>
		<img src="me.png" id="image" />
    </body>
</html>
